@import 'styles/mixins.scss';
.root {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  @include box(266px, 100%, #ebecf0);
  border-radius: 8px;
  overflow: hidden;
  :global {
    .title {
      @include flex;
      margin-bottom: 8px;
      @include box(100%, 50px, #fff);
      font-size: 18px;
      color: #fff;
      // background-color: #fff; /* 浏览器不支持的时候显示 */
      background-image: radial-gradient(
        circle,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        purple
      ); /* 标准的语法（必须放在最后） */
      &:hover {
        background-color: #e3fcef;
        transition: font-size 0.2s ease;
        font-size: 24px;
        background-image: radial-gradient(
          circle,
          cyan,
          magenta,
          yellow,
          pink,
          salmon,
          brown
        );
      }
    }
    .list {
      margin-left: 8px;
      flex: 1;
      min-height: 90px;
      &-active {
        background-color: pink;
      }
    }
  }
}
.rootActive {
  background-color: pink;
}
